<template>
	<view class="login-page">
		<div class="login-header">
			<img src="@/static/images/bj.png" alt="" />
			<!-- <img class="logo" src="@/static/images/logo.png" alt="" /> -->
			<!-- <img class="logo" src="@/statice/images/logo.png" alt="" /> -->
		</div>
		<div class="from">
			<div class="form-title">
				<span>欢迎登录</span>
				<img src="@/static/images/login-line.png" alt="">
			</div>
			<div class="from-list">
				<div class="from-item">
					<div class="input-box">
						<i class="Ticonfont Ticon-yonghu"></i>
						<uni-easyinput :inputBorder="false" type="text" v-model="formData.mobile"
							placeholder="请输入账号" />
					</div>
				</div>
				<div class="from-item">
					<div class="input-box">
						<i class="Ticonfont Ticon-mima"></i>
						<uni-easyinput :inputBorder="false" type="password" v-model="formData.password"
							placeholder="请输入密码" />
					</div>
				</div>
				<div class="from-item">
					<div class="input-box">
						<i class="Ticonfont Ticon-yanzhengyanzhengma"></i>
						<uni-easyinput :inputBorder="false" type="text" v-model="formData.yzm" placeholder="请输入验证码" />
					</div>
					<div class="yzm">
						<img :src="captchaimg" alt="" />
					</div>
					<div class="refresh" :class="{refreshbox:isRotating==true}" @click="refresh()">
						<i class="Ticonfont Ticon-shuaxin"></i>
						<!-- 看不清，换一张 -->
					</div>
				</div>
				<span></span>
			</div>
			<div class="from-item" @click="register()">
				<div class="register">没有账号？去注册</div>
			</div>
			<button class="submit" @click="submit()">登录</button>
<!-- 			<div class="rest">
				<span class="line"></span>
				<span>其他登录方式</span>
				<span class="line"></span>
			</div> -->
			<!-- 微信授权快捷登陆 -->
<!-- 			<div class="Ticonfont Ticon-weixin"></div> -->
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					mobile: '',
					password: '',
					key:'',
					md5:''
				},
				captchaimg: '',
				isRotating: false,
				isUserInfo: false //是否已完善用户信息
			};
		},
		onReady() {
			// 需要在onReady中设置规则
			// this.$refs.form.setRules(this.rules)
		},
		created() {
			this.captcha();
		},
		methods: {
			// 验证码
			captcha() {
				this.$H.get('/captcha/image').then(res => {
					this.captchaimg = res.data.base64
					this.formData.key = res.data.key
					this.formData.md5 = res.data.md5
				})
			},
			refresh() {
				this.isRotating = true
				setTimeout(() => {
					this.captcha();
					this.isRotating = false
				}, 1000)
				this.captcha();
			},
			// 去注册
			register() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			// 表单提交
			submit(form) {
				// 获取用户信息
				// 判断是否已填用户信息
/* 				if (this.isUserInfo) {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				} else {
					uni.reLaunch({
						url: '/pages/my/my-user-perfection'
					})
				} */
				if (this.formData.mobile == '') {
					uni.showToast({
						icon: "none",
						title: '手机号不能为空'
					})
					
					return false;
				}
								
				let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if(!myreg.test(this.formData.mobile)){
					uni.showToast({
						icon: "none",
						title: '手机格式不正确'
					})
					return false;
				}
				
				
				if (this.formData.password == '') {
					uni.showToast({
						icon: "none",
						title: '密码不能为空'
					})
					return false;
				}

				this.$H.post('/passport/passlogin', {
					form: this.formData
				}).then(res => {
					if (res.status == 500) {
						uni.showToast({
							icon: "none",
							title: res.message
						})
						// 刷新验证码
						this.captcha();
					}
					if (res.status == 200) {
						uni.showToast({
							icon: "success",
							title: res.message
						})
						
						uni.setStorageSync('token', res.data.token);	

						uni.switchTab({
							url: '/pages/my/my',
						})
					}
				})
				// this.$refs.form.validate().then(res => {
				// 	console.log('表单数据信息：', res);
				// }).catch(err => {
				// 	console.log('表单错误信息：', err);
				// })
			}
		}
	}
</script>

<style lang="scss">
	.login-header {
		width: 100%;
		position: relative;

		img {
			width: 100%;
			height: 100%;
		}

		.logo {
			width: 321rpx;
			height: 200rpx;
			position: absolute;
			left: 50%;
			top: 200rpx;
			transform: translate(-50%, 0px);
		}
	}

	.from {
		width: 673rpx;
		height: 735rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 52rpx 0rpx rgba(4, 0, 0, 0.1);
		border-radius: 16rpx;
		position: absolute;
		top: 400rpx;
		left: 50%;
		transform: translate(-50%, 0);
		padding: 41rpx 0px;

		.form-title {
			width: 100%;
			text-align: center;
			position: relative;
			font-size: 40rpx;
			font-family: PingFang SC;
			// font-weight: 500;
			color: #10B884;
			text-shadow: 0rpx 3rpx 0rpx rgba(0, 35, 16, 0.1);
			font-weight: bold;

			img {
				position: absolute;
				left: 50%;
				bottom: 0px;
				transform: translate(-50%, 0);

			}
		}

		.from-item {
			display: flex;
			align-items: center;
			padding: 0px 45rpx;
			box-sizing: border-box;
			padding-top: 36rpx;

			.Ticonfont {
				color: rgba(23, 191, 139, 1);
			}

			.input-box {
				flex-grow: 1;
				flex-shrink: 1;
				flex-basis: 1;
				display: flex;
				align-items: center;
				border-bottom: 1px solid rgba(16, 184, 132, 0.5);
			}

			.yzm {
				width: 171rpx;
				height: 76rpx;
				flex-grow: 0;
				flex-shrink: 0;
				margin-left: 10rpx;

				// flex-basis: 0;
				img {
					width: 100%;
					height: 100%;
				}
			}

			.refresh {
				flex-grow: 0;
				flex-shrink: 0;

				.Ticonfont {
					font-size: 53rpx;
					padding: 10rpx;
					padding-right: 0px;
					color: rgba(23, 191, 139, 1);
				}

				// flex-basis: 0;
			}
		}

		.submit {
			width: 600rpx;
			height: 92rpx;
			background: #17BF8B;
			border-radius: 46rpx;
			color: #fff;
			margin-top: 50rpx;
		}

	}

	.refreshbox {
		-webkit-animation: rotation 1s ease-out 1;
		-ms-animation: rotation 1s ease-out 1;
		animation: rotation 1s ease-out 1
	}

	@-webkit-keyframes rotation {

		from {
			-webkit-transform: rotate(0deg);
		}

		to {
			-webkit-transform: rotate(360deg);
		}

	}

	@keyframes rotation {
		from {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg)
		}

		to {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg)
		}
	}

	.rest {
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0px;
		color: #666;

		.line {
			width: 200rpx;
			height: 1px;
			background: #f1f1f1;
		}
	}

	.Ticon-weixin {
		color: #10B884;
		font-size: 40rpx;
		text-align: center;
	}

	.register {
		text-align: left;
		// margin-top: 30rpx;
		width: 100%;
		color: #10B884;

	}
</style>